<template>
	<div class="kaoguanguanli">
    <el-dialog title="打印准考证" center :visible.sync="log" :close-on-press-escape="false" :close-on-click-modal="false" width="890px">
      <div id="zhunkaozheng" ref="zhunkaozheng">
        <div style="border: 1px #ccc solid; width: 850px; padding: 50px;">
          <div style="font-size: 18px; margin-bottom: 20px; display: flex; justify-content: center; align-items: center;">奥德欧标德语考试</div>
          <div style="font-size: 22px; margin-bottom: 20px; display: flex; justify-content: center; align-items: center;">准考证</div>
          <div style="margin-bottom: 20px; display: flex; justify-content: center; align-items: center;">
            <div style="flex: 200px;">
              <div><img :src="this.IP_URL+'/getimage?imgid='+all.headimg" style="width: 200px;"></div>
              <!-- <div><img src="../../../static/img/icon-ZB2.svg"></div> -->
            </div>
            <div style="flex: 500px; margin-left: 40px;">
              <div style="margin-bottom: 20px;  display: flex; align-items: center;">
                <div style="flex: 1;">姓名（中文）：{{all.prename_cn}}{{all.name_cn}}</div>
                <div style="flex: 1;">姓名（英文/拼音）：{{all.prename_eng}}{{all.name_eng}}</div>
              </div>
              <div style="margin-bottom: 20px;  display: flex; align-items: center;">
                <div style="flex: 1;" v-if="all.sex == 1">性别：男</div>
                <div style="flex: 1;" v-if="all.sex == 2">性别：女</div>
                <div style="flex: 1;">国籍：{{all.country}}</div>
              </div>
              <div style="margin-bottom: 20px;  display: flex; align-items: center;">
                <div style="flex: 1;">出生地：{{all.birthadr}}</div>
                <div style="flex: 1;">出生日期：{{all.birth}}</div>
              </div>

              <div style="margin-bottom: 20px;">证件号：{{all.cardid}}</div>
              <div style="margin-bottom: 20px;">考试：{{item.testclass}}</div>
              <div style="margin-bottom: 20px;">考场：{{item.siteno}}</div>
              <div style="margin-bottom: 20px;">座号：{{item.chatno}}</div>
              <div style="margin-bottom: 20px;">考点地址：{{item.address_cn}}</div>

            </div>
          </div>
          <!-- <div style="margin-bottom: 20px; border-bottom: 1px #ccc solid;">
            <div style="display: flex; text-align: center; border-right: 1px #ccc solid;  ">
              <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">考试时间</div>
              <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">考试科目</div>
              <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">考场</div>
              <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">座位号</div>
            </div>
            <div style="display: flex; text-align: center; border-right: 1px #ccc solid; ">
              <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">考试时间</div>
              <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">考试科目</div>
              <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">考场</div>
              <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">座位号</div>
            </div>
            <div style="display: flex; text-align: center; border-right: 1px #ccc solid;  ">
              <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">考试时间</div>
              <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">考试科目</div>
              <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">考场</div>
              <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">座位号</div>
            </div>
            <div style="display: flex; text-align: center; border-right: 1px #ccc solid;  ">
              <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">考试时间</div>
              <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">考试科目</div>
              <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">考场</div>
              <div style="flex: 1; border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 5px 0;">座位号</div>
            </div>
          </div> -->
          <div style="">
            <div  style="margin-bottom: 20px; display: flex; align-items: center;">
              <div style="width: 200px;">身份证正面</div>
              <div><img :src="this.IP_URL+'/getimage?imgid='+all.photo1" style="width: 200px;"></div>
              <!-- <chuantu @getimgid="getimgid" :imgid="all.photo1" v-if="relo" :zi="'上传身份证反面'" style="width: 316px; height: 200px;"></chuantu> -->
            </div>
            <div style="margin-bottom: 20px; display: flex; align-items: center;">
              <div style="width: 200px;">身份证反面</div>
              <div><img :src="this.IP_URL+'/getimage?imgid='+all.photo2" style="width: 200px;"></div>
              <!-- <chuantu @getimgid="getimgid2" :imgid="all.photo2" v-if="relo" :zi="'上传身份证反面'" style="width: 316px; height: 200px;"></chuantu> -->
            </div>
          </div>
        </div>
      </div>
      <div style="padding: 50px;" class="flexcc">
        <el-button type="primary" round @click="dayin">打印</el-button>
      </div>

    </el-dialog>

    <el-dialog title="图片剪切" center :visible.sync="log2" :close-on-press-escape="false" :close-on-click-modal="false" width="700px">
      <vue-cropper ref="cropper" :img="imgurl2" :autoCrop="true" :autoCropWidth="660" :autoCropHeight="660"> </vue-cropper>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" round @click="log = false">关闭</el-button>
        <el-button type="danger" round @click="baocun">保存</el-button>
      </span>
    </el-dialog>

    </div>
	</div>
</template>

<script>
  import Print from 'print-js'
  import CropperImage from "./jianqietu.vue";
  import { VueCropper } from 'vue-cropper'
  import chuantu from '../../components/chuantu.vue'
	export default {
		name: 'index',
    components:{
      chuantu,CropperImage,VueCropper
    },
    props:['item'],
		data() {
			return {
        log:false,
        act:1,
        all:{
          // cardtype:"",// 证件类型
          // cardid:"",// 证件id
          // regtime:"",// 用户注册时间
          // email:"",//
          // phone:"",// 手机
          // pswreset:"",// 是否需要重置密码  1 需要 ，0 不需要
          // prename_cn:"",// 中文姓
          // name_cn:"",//  中文名
          // prename_eng:"",// 英文姓
          // name_eng:"",//  英文名
          // sex:"",//  性别
          // birth:"",// 出生日期
          // birthadr:"",// 出生地
          // birthcountry:"",//  出生国
          // country:"",// 国籍
          // address:"",//  邮寄地址
          // postid:"",//   邮编
          // adr_country:"",// 居住国
          // provice:"",//   居住省
          // city:"",//   居住城市
          // opttime:"",// 最后修改时间
        },
        tableData: [],
        imgurl:"",
        imgurl2:"",
        relo:true
			}
		},
		created() {
      console.log(this.item)

      this.huoqu()
		},
		mounted() {

		},
		methods: {
      getBase64(file) {
        return new Promise(function (resolve, reject) {
          const reader = new FileReader();
          let imgResult = "";
          reader.readAsDataURL(file);
          reader.onload = function () {
            imgResult = reader.result;
          };
          reader.onerror = function (error) {
            reject(error);
          };
          reader.onloadend = function () {
            resolve(imgResult);
          };
        });
      },
      uploadok:function(file){
        this.getBase64(file.raw).then((res) => {
          this.imgurl2 = res
          this.showlog(1)
        });
      },
      showlog:function(val){
        this.act = val
        this.log = true
      },
      baocun:function(){
        this.$refs.cropper.getCropData(data => {
          // do something
          this.imgurl = data
          this.log = false
          console.log(data)
        })
        // this.$refs.cropper.getCropBlob(data => {
        //   // do something
        //   console.log(data)
        // })
      },
      huoqu:function(){
        axios.post(this.IP_URL+'/user/getinfo').then((response)=>{
          if(response.data.errorcode == 0){
            this.all = response.data.data
          } else {
            this.$message.error(response.data.reason);
          }
        })
      },
      dayin:function(){


        setTimeout( ()=> {
          Print({
            printable:document.getElementById('zhunkaozheng'),
            type: 'html',
            scanStyles:false
          })
        }, 500)

        // let printSection = document.getElementById('zhunkaozheng');
        // let printWindow = window.open('', '_blank');
        // printWindow.document.write(printSection.innerHTML);
        // printWindow.document.close();
        // printWindow.focus();
        // printWindow.print();
        // printWindow.close();
        // setTimeout(()=>{
        //   this.dayin()
        // },100)

      },
      change1:function(){
        this.all.name2 = pinyinPro.pinyin(this.all.name, { toneType: 'none' })


      }
    }
	}
</script>


<style scoped lang="less">

  .vue-cropper{ width: 660px;  height: 660px;}
  // .cropper{
  //   width: 660px;
  //   height: 660px;
  // }
  // .cropper-crop-box{ width: 500px; height: 300px;}

  .tli{ padding: 5px 0; text-align: center; flex: 1;}

  table {
          border-right: 1px solid #000000;
          border-bottom: 1px solid #000000;
          text-align: center;
      }

      table th {
          border-left: 1px solid #000000;
          border-top: 1px solid #000000;
          padding: 5px;
      }

      table td {
          border-left: 1px solid #000000;
          border-top: 1px solid #000000;
           padding: 5px;
      }
</style>
